import utils from "../utils/index";
import { InitailTypes } from "../types/index";

const getItemStringForVertical = (arr: Array<any>, options: InitailTypes) => {
    let result = "";
    arr.forEach(item => {
        let child: String = "";
        if (item.children) {
            child = `<ul class="un-org-tree-item-childer">
                        <i class="un-org-tree--horizontal-line"></i>
                        ${getItemStringForVertical(item.children, options)}
                     </ul>`;
        }
        child = utils.trim(child);
        let childClass =
            child.length > 0 ? "un-org-tree-item" : "un-org-tree-item leaf";
        result += `<li class="${childClass}">
                        <span>
                            <span class="${options.itemClass}"
                                    data-id="${item[options.selfIdField]}"
                                    title="${item[options.text]}">
                                ${item[options.text]}
                                <i class="un-org-tree--vertical-line top"></i>
                                ${
                                    item.children && item.children.length > 0
                                        ? '<i class="un-org-tree--vertical-line bottom"></i>'
                                        : ""
                                }
                            </span>
                        </span>
                        ${child}
                   </li>`;
    });
    return result;
};

const getItemStringForHorizontal = (arr: Array<any>, options: InitailTypes) => {
    let result = "";
    arr.forEach(item => {
        let child: String = "";
        if (item.children) {
            child = `
                    <i class="un-org-tree--vertical-line"></i>
                    <ul class="un-org-tree-item-childer">
                        ${getItemStringForHorizontal(item.children, options)}
                     </ul>`;
        }
        child = utils.trim(child);
        let childClass =
            child.length > 0 ? "un-org-tree-item" : "un-org-tree-item leaf";
        result += `<li class="${childClass}">
                        <span>
                            <span class="${options.itemClass}"
                                    data-id="${item[options.selfIdField]}"
                                    title="${item[options.text]}">
                                ${item[options.text]}
                                <i class="un-org-tree--horizontal-line left"></i>
                                ${
                                    item.children && item.children.length > 0
                                        ? '<i class="un-org-tree--horizontal-line right"></i>'
                                        : ""
                                }
                            </span>
                        </span>
                        ${child}
                   </li>`;
    });
    return result;
};

const setHorizontalLineWidth = (el: any) => {
    // 获取需要设置宽度的线条元素
    let els = el.querySelectorAll("i.un-org-tree--horizontal-line");
    els.forEach((item: { parentNode: any; setAttribute: (arg0: string, arg1: string) => void; }) => {
        // 获取父级节点
        // 定义最终返回宽度
        let resultWidth = 0,
            parent = item.parentNode,
            // 获取父级节点的宽度
            parentWidth = parent.offsetWidth,
            // 获取父级节点下所有的子节点
            tempChildren = parent.children,
            children = [];
        // 过滤掉非 li 节点
        for (let i = 0, len = tempChildren.length; i < len; i++) {
            if (tempChildren[i].localName === "li") {
                children.push(tempChildren[i]);
            }
        }
        const childrenLength = children.length;
        let firstChild = 0,
            lastChild = 0;
        if (childrenLength > 1) {
            // 获取子节点中的 第一项 的宽度的一半
            firstChild = (children[0].offsetWidth) / 2;
            // 获取子节点中的 最后一项 的宽度的一半
            lastChild = (children[childrenLength - 1].offsetWidth) / 2;
            // 最终返回结果为 "父级节点宽度" - "子节点中的 第一项 的宽度的一半" - "子节点中的 最后一项 的宽度"的一半
            resultWidth = parentWidth - firstChild - lastChild;
        }
        let style = `width: ${resultWidth}px; left: ${firstChild}px;`
        item.setAttribute('style', style)
    });
}

const setHorizontalLineHeight = (el: any) => {
    // 获取需要设置宽度的线条元素
    let els = el.querySelectorAll(".un-org-tree-item>i.un-org-tree--vertical-line");
    els.forEach((item: any) => {
        // 获取下一节点ul的高度
        let next = item.nextElementSibling,
            nextNodes = next.childNodes,
            nextHeight = next.offsetHeight,
            nextWidth = next.offsetWidth,
            children = []
        for (let i = 0, len = nextNodes.length; i < len; i++) {
            if (nextNodes[i].localName === "li") {
                children.push(nextNodes[i]);
            }
        }
        if(children.length < 2) {
            let style = `height: 1px; right: ${nextWidth - 10}px;`
            item.setAttribute('style', style);
        } else {
            let childNode:Array<any> = [];
            for (let i = 0, len = next.childNodes.length; i < len; i++) {
                if (next.childNodes[i].localName === "li") {
                    childNode.push(next.childNodes[i]);
                }
            }
            const firstChild = (children[0].offsetHeight) / 2;
            // 获取子节点中的 最后一项 的高度的一半
            const lastChild = (childNode[childNode.length - 1].offsetHeight) / 2;
            // 最终返回结果为 "父级节点高度" - "子节点中的 第一项 的高度的一半" - "子节点中的 最后一项 的宽度"的一半
            let resultHeight = nextHeight - firstChild - lastChild;
            const style = `height: ${resultHeight * 2 }px; right: ${nextWidth - 20}px;`
            item.setAttribute('style', style);
        
        }
    });
}
export default {
    getItemStringForVertical,
    getItemStringForHorizontal,
    setHorizontalLineWidth,
    setHorizontalLineHeight
};
